come impostare i path assoluti in react con vite

Quando si crea un progetto, c'è una cosa che secondo me è importantissima da fare e che migliorerà la leggibilità del tuo codice, ma che non tutti fanno ovvero impostare un path assoluto, moltissime persone e io sono d'accordo all'inizio pensano più a far funzionare l'applicativo e meno a farlo strutturalmente corretto, però secondo me questa che ti sto per andare a dire essendo un passaggio relativamente molto breve, è una di quelle cosa da aggiungere nella propria checklist di cose da fare quando si starta un progetto, ora approfondiamo un'po i path assoluti e perchè sono meglio di quelli relativi.

PATH RELATIVI VS PATH ASSOLUTI

Allora se per un progetto di piccole dimensioni e che si sa non avrà un'espansione come magari potrebbero essere dei progettini personali o progetti di piccolissima portata forse potrebbe anche non esser necessario l'inserimento di path assoluti anche se io credo che per quanto è semplice, conviene sempre inserire dei path assoluti, per il resto dei progetti credo sia necessario perchè si ha una struttura solitamente molto innestata e quindi poter avere questo per esempio: @/components/file.jsx rispetto a questo: ../../../../components/file.jsx credo sia molto meglio poichè più leggibile e più manutenibile poichè tu sai che quel @ sarà associato per esempio a src o a qualsiasi cosa tu gli dici deve essere associato. QUINDI MI RACCOMANDO NON USATE I PATH RELATIVI.

COME IMPOSTARE UN PATH ASSOLUTO:

Ovviamente per poter impostare un path assoluto dobbiamo avere un progetto react creato e ora vi farò vedere come crearne uno allora:

1. Come prima cosa dovete aver installato vite e node js e un eventuale package manager come yarn, pnpm o bun per esempio se non volete utilizzare npm(cosa che consiglio) e vite.
2. Dopo aver installato quello detto sopra, aprite il vostro text editor(cursor, vs code ecc...) e aprite il terminale e digitate: yarn create vite@latest --template react demo-app e con questo comando gli state dicendo cosa deve utilizzare come linguaggio e il nome, una volta avviato il comando finite la configurazione di base di vite che vi esce a schermo e vi si creerà la cartella con tutto quello che vi serve di base per startare un sito web di base.
3. Poi dopo entriamo nella cartella del progetto generato con il terminale tramite cd demo-app poi facciamo yarn install e installiamo tutte le dipendenze dell'applicazione e cosi se dopo vogliamo lanciare l'applicazione in modalità di sviluppo facciamo yarn dev.

Ora tornando al nostro obbiettivo, per implementare i path assoluti dobbiamo modificare questo file vite.config.js e aggiungere questo pezzo che ora vi andrò a spiegare:

resolve: {
  alias: {  
    "@": path.resolve(_dirname, "./src"),
  },
},     

Qui state andando a dire al compiler che quel @, sarà collegato a ./src, quindi da che prima con i path relativi si andava a usare ../../../components/file.jsx ora si userà:

@/components/file.jsx e così ci saremmo risparmiati tutti quei ../ che rendono il codice illegibile e non manutenibile onestamente.

Poi come secondo passaggio andremmo a modificare un altro file ovvero il file tsconfig.json e andremmo ad aggiungere la seguente parte:

"paths": {
   "@/*": ["./src/*"]
 },

E quindi ora i due file risulteranno così:

  /* TSCONFIG.JSON */
  {
    "files": [],
    "references": [
      { "path": "./tsconfig.app.json" },
      { "path": "./tsconfig.node.json" }
    ],
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["./src/*"]
      },
      "noImplicitAny": false,
      "noUnusedParameters": false,
      "skipLibCheck": true,
      "allowJs": true,
      "noUnusedLocals": false,
      "strictNullChecks": false
    }
  }

/* VITECONFIG.JSON */

export default defineConfig(({ mode }) => ({
  server: {
    host: "::",
    port: 5173,
  },
  plugins: [
    react(),
    mode === 'development' &&
    componentTagger(),
  ].filter(Boolean),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));

Ma ora la domanda è perchè si devono configurare tutti e due questi file?

molto semplice, allora perchè tsconfig.json permette di dire a typescript guarda che se leggi @ devi mettere quello che tieni scritto nel resolver, così da evitare errori di import durante il type-checking e soprattutto per avere l'autocompletamento e non avere errori di "file not found" mentre per quanto riguarda il vite.config.ts serve perchè ovviamente il file non legge dal tsconfig e quindi va detto pure a vite come tradurre quella @, così che vite riesca a tradurre effettivamente quel path in un file fisico.